// Copyright 2018 The Cockroach Authors.
//
// Use of this software is governed by the Business Source License
// included in the file licenses/BSL.txt.
//
// As of the Change Date specified in that file, in accordance with
// the Business Source License, use of this software will be governed
// by the Apache License, Version 2.0, included in the file
// licenses/APL.txt.

@require '~styl/base/palette.styl'
@require '~src/views/shared/util/table.styl'

.statements-table
  &__col-query-text
    font-family monospace
    white-space pre-wrap

.statements
  &__last-hour-note
    margin-left 3px
    font-style italic
    color $body-color

.back-link
  text-decoration none
  color $link-color

.statement-count-title, .last-cleared-title
  font-family Lato-Regular
  font-size 14px
  padding 0px
  margin 0px
  color $body-color
  .label
    font-family Lato-Bold
    color #394455

.last-cleared-tooltip, .numeric-stats-table, .plan-view-table
  &__tooltip
    width 36px  // Reserve space for 10px padding around centered 16px icon
    height 16px
    display inline-block

    // Overrides to let the tooltip sit inside a table header.
    text-transform none
    font-weight normal
    white-space normal
    letter-spacing normal
    font-size 14px

  &__tooltip-hover-area
    width 100%
    padding 0px 10px

  &__info-icon
    width 16px
    height 16px
    border-radius 50%
    border 1px solid $tooltip-color
    font-size 12px
    line-height 14px  // Visual tweak to vertically center the "i"
    text-align center
    color $tooltip-color

  .hover-tooltip--hovered &__info-icon
    border-color $body-color
    color $body-color

.app-name
  white-space nowrap

  &__unset
    color $tooltip-color
    font-style italic

.statements-table__col-time
  text-align right
  white-space nowrap

.statements-table__col-count
  .bar-chart
    width 100px

.statements-table__col-retries
  .bar-chart
    width 80px

.numeric-stats-table
  .bar-chart
    width 200px

.statements-table__col-rows, .statements-table__col-latency
  .bar-chart
    width 140px

.statements-table__col-count, .statements-table__col-retries, .statements-table__col-rows
  .bar-chart
    margin-left 3em

    .label
      left -3em
      width 2.5em

.bar-chart
  height 14px
  margin-left 5em
  position relative

  .label
    position absolute
    left -5em
    width 4.5em
    text-align right
    top -2px

  &__bar
    display inline-block
    height 14px

    &--dev
      position absolute
      height 3px
      top 6px

  .count-first-try, .count-total
    background-color $link-color

  .count-retry, .count-max-retries
    background-color $alert-color

  .rows, .latency-parse, .latency-plan, .latency-run, .latency-overhead, .latency-overall
    background-color $link-color

  .rows-dev, .latency-parse-dev, .latency-plan-dev, .latency-run-dev, .latency-overhead-dev, .latency-overall-dev
    background-color $warning-color

.numeric-stats-table
  @extend $table-base

  &__row--summary
    color black
    font-weight bold

.details-bar
  margin 12px 0

.numeric-stat-legend
  white-space nowrap

  th
    position relative
    padding-left 24px
    padding-right 5px

  td
    text-align right

  &__bar
    position absolute
    width 21px
    left 0

    &--mean
      height 14px
      top 2px
      background-color $link-color

    &--dev
      height 3px
      top 8px
      background-color $warning-color

$plan-node-line-color = #DADADA                                 // connecting line: light gray
$plan-node-warning-color = #D18737                              // dark orange
$plan-node-warning-background-color = rgba(209, 135, 55, 0.06)  // light orange
$plan-node-warning-border-color = rgba(209, 135, 55, 0.3)       // dark orange 2
$plan-node-details-background-color = #F6F6F6                   // grayish-white
$plan-node-details-border-color = #ACB8CB                       // dark gray
$plan-node-attribute-key-color = #5cc123                        // light green

.plan-view-table
  @extend $table-base
  &__row
    &--body
      border-top $table-cell-border
      &:nth-child(odd)
        background-color $stats-table-tr--bg

  &__tooltip
    width 520px

    .hover-tooltip__text
      width 520px

.plan-view
  color $body-color
  position relative
  padding-left 6px

  .plan-view-container
    height 100%
    max-height 100%
    overflow hidden

    .plan-view-container-scroll
      max-height 400px
      overflow-y scroll

    .plan-view-container-directions
      text-align center
      cursor pointer
      text-transform uppercase
      color $main-blue-color
      font-size smaller

  .node-icon
    margin 0 10px 0 12px

  .warning-icon
    margin 0 4px 0 4px
    position relative
    top 3px
    path
      fill $plan-node-warning-color

  .warn
    position relative
    left -5px
    color $plan-node-warning-color
    background-color $plan-node-warning-background-color
    border-radius 2px
    padding 2px

  .nodeDetails
    position relative
    padding 6px 0
    margin 2px 0
    border 1px solid transparent

  .nodeAttributes
    color $body-color
    padding 7px 16px 0px 18px
    margin-left 16px
    border-left 1px solid $plan-node-line-color
    background-color white
    font-family Inconsolata-Regular, monospace

    .nodeAttributeKey
      color $plan-node-attribute-key-color

  ul
    padding 0
    margin 0
    li
      padding 0
      margin 0
      position relative
      list-style-type none

      // vertical line, to previous node (above)
      &:not(:first-child):after
        content ''
        width 1px
        height 19px
        background-color $plan-node-line-color
        position absolute
        top -10px
        left 17px

      ul
        padding-left 40px

        li
          // first node: horizontal line, to parent
          &:first-child:after
            content ''
            height 1px
            width 34px
            background-color $plan-node-line-color
            position absolute
            top 17px
            left -22px

          // vertical line, to parent
          &:before
            content ''
            width 1px
            height 100%
            background-color $plan-node-line-color
            position absolute
            top -10px
            left -23px

.statements-table-container
  padding 18px 24px

.statements-statistic
  display flex
  justify-content space-between
  align-items center
  margin-bottom 7px

._pg-jump
  width 32px
  height 24px
  position relative
  justify-content center
  align-items center
  ._jump-dots
    position absolute
    top 50%
    left 50%
    transform: translate(-50%, -50%)
    color #b8bbbc
    font-size 14px
    letter-spacing 1.5px
  .anticon
    position absolute
    top 50%
    left 50%
    transform: translate(-50%, -50%)
    display none
    font-size 10px
    color #3a7ce1
  &:hover
    ._jump-dots
      display none
    .anticon
      display block

.statements-table__col-query-text
  font-family RobotoMono-Regular
  font-size 12px
  color #3e80de
  line-height 2
  text-decoration underline
  text-overflow ellipsis
  overflow: hidden
  ._text-bold
    font-family RobotoMono-Bold